<template>
	<div>
		<ul class="icons-ul">
			<li v-for='item in list' :key="item.id">
				<router-link to="/">
					<img :src="item.url"/>
					<p>{{item.name}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Icons',
		data(){
			return {
				list:[
					{id:1,name:'国内游',url:require('../../../assets/img/index_nav_around.6afbabd8.png')},
					{id:2,name:'住宿',url:require('../../../assets/img/index_nav_cn.b39dc0d0.png')},
					{id:3,name:'境外游',url:require('../../../assets/img/index_nav_en.213dedbc.png')},
					{id:4,name:'海岛度假',url:require('../../../assets/img/index_nav_free.b8cb8c43.png')},
					{id:5,name:'境外游',url:require('../../../assets/img/index_nav_free.b8cb8c43.png')},
				],
			}
		}
	}
</script>

<style>
a{
	text-decoration: none;
}
.icons-ul{
	border-bottom: 0.03rem solid gainsboro;
	overflow: hidden;
	padding: 1.3rem 0 0;
}
.icons-ul li{
	float: left;
	width: 20%;
	text-align: center;
}
.icons-ul li img{
	height: 1rem;
	width:  1rem;
}
.icons-ul li p{
	color: #000000;
	font-size: 0.3rem;
	font-weight: bold;
	padding-bottom: 0.5rem;
	margin-top: 0.15rem;
}
</style>